<template>
	<div>
    <Modal v-model="modal11">
      <img :src="url"/>
    </Modal>
			<h1 style="text-align: center;margin: 20px;">房屋出售</h1>
		<div class="content">
				<div class="width1190">
					<form action="#" method="get" class="pro-search">
						<table>
							<tbody>
								<tr>
									<th>省份：</th>
									<td>  
											<a href="javascript:;"><input @click="searchCity()"
														type="radio" name="provienceId" id="provienceId_0" value="0"
														checked="checked" v-model="house.provienceId" />
													<label for="provienceId_0">不限</label>
												</a>
												<a href="javascript:;" v-for="p in proviences"><input @click="searchCity(p.srId)" type="radio"
														name="provienceId" :id='"provienceId_"+p.srId' :value='p.srId'
														v-model="house.provienceId" />
													<label :for='"provienceId_"+p.srId'>{{p.name}}</label></a>
									</td>
								</tr>
								<tr>
									<th>城市：</th>
									<td>  
											<a href="javascript:;">
												<input @click="searchRegin()" type="radio" name="cityId" id="cityId_0"
													value="0" checked="checked" v-model="house.cityId" />
												<label for="cityId_0">不限</label>
											</a>
											<a href="javascript:;" v-for="c in citys">
												<input @click="searchRegin(c.srId)" type="radio" name="cityId" :id='"cityId_"+c.srId'
													:value='c.srId' v-model="house.cityId" />
												<label :for='"cityId_"+c.srId'>{{c.name}}</label>
											</a>
									</td>
								</tr>
								<tr>
									<th>区域：</th>
									<td>  
											<a href="javascript:;">
												<input @click="searchRChange(0)" type="radio" name="reignId" id="reignId_0"
													value="0" checked="checked" v-model="house.reignId" />
												<label for="reignId_0">不限</label>
											</a>
											<a href="javascript:;" v-for="r in regins">
												<input @click="searchRChange(r.srId)" type="radio" name="reignId" :id='"reignIdId_"+r.srId'
													:value='r.srId' v-model="house.reignId" />
												<label :for='"reignIdId_"+r.srId'>{{r.name}}</label>
											</a>
									</td>
								</tr>
								<tr>
									<th>商圈：</th>
									<td>  
											<Input v-model="house.pianqu" @on-change="searchPianqu()" style="display: inline-block; width:150px;margin-right: 20px;" placeholder="请输入片区"></Input>
											
									</td>
								</tr>
								<tr>
									<th>小区：</th>
									<td>  
											
											<Input v-model="house.xiaoqu" @on-change="searchXiaoqu()" style="width:150px;" placeholder="请输入小区"></Input>
									</td>
								</tr>
								<tr>
									<th>价格：</th>
									<td>
										<a href="javascript:;" v-for="item in prices">
											<input @click="searchPricePage(item.sellPriceId)"  type="radio" name="price"  :id="'price_' + item.sellPriceId " :value="item.sellPriceId"  :key="item.sellPriceId"  v-model="house.sellPriceId" />
											<label :for="'price_' + item.sellPriceId">{{ item.priceInterval }}</label>
										</a>
									</td>
								</tr>
								<tr>
									<th>面积：</th>
									<td>
										<a href="javascript:;" v-for="item in areas">
											<input @click="searchAreaPage(item.houseAreaId)"  type="radio" name="area"  :id="'area_' + item.houseAreaId " :value="item.houseAreaId"  :key="item.houseAreaId"  v-model="house.houseAreaId" />
											<label :for="'area_' + item.houseAreaId">{{ item.areaInterval }}</label>
										</a>
									</td>
								</tr>
								<tr>
									<th>户型：</th>
									<td>
										<a href="javascript:;" v-for="item in roomCounts">
											<input @click="searchRoomType(item.value)"  type="radio" name="roomCount"  :id="'roomCount_' + item.value " :value="item.value"  :key="item.value"  v-model="house.roomCount" />
											<label :for="'roomCount_' + item.value">{{ item.label }}</label>
										</a>
									</td>
								</tr>
								<tr>
									<th>楼层：</th>
									<td>
										<a href="javascript:;" v-for="item in floors">
											<input @click="searchLouceng(item.value)"  type="radio" name="floor"  :id="'floor_' + item.value " :value="item.value"  :key="item.value"  v-model="house.louceng" />
											<label :for="'floor_' + item.value">{{ item.label }}</label>
										</a>
									</td>
								</tr>
								<tr>
									<th>朝向：</th>
									<td>
										<a href="javascript:;" v-for="item in faces">
											<input @click="searchChaoxiang(item.value)"  type="radio" name="face"  :id="'face_' + item.value " :value="item.value"  :key="item.value"  v-model="house.chaoxiang" />
											<label :for="'face_' + item.value">{{ item.label }}</label>
										</a>
									</td>
								</tr>
								<tr>
									<th>产权：</th>
									<td>
										<a href="javascript:;" v-for="item in propertTypes">
											<input @click="searchProperty(item.label)"  type="radio" name="propertType"  :id="'propertType_' + item.value " :value="item.value"  :key="item.value"  v-model="house.typeName" />
											<label :for="'propertType_' + item.value">{{ item.label }}</label>
										</a>
									</td>
								</tr>
								<tr>
									<th>装修：</th>
									<td>
										<a href="javascript:;" v-for="item in repairs">
											<input @click="searchZhuangxiu(item.value)"  type="radio" name="repair"  :id="'repair_' + item.value " :value="item.value"  :key="item.value"  v-model="house.zhuangxiu" />
											<label :for="'repair_' + item.value">{{ item.label }}</label>
										</a>
									</td>
								</tr>
								<tr>
									<th>电梯：</th>
									<td>
										<a href="javascript:;" v-for="item in lifts">
											<input @click="searchDianti(item.value)"  type="radio" name="lift"  :id="'lift_' + item.value " :value="item.value"  :key="item.value"  v-model="house.dianti" />
											<label :for="'lift_' + item.value">{{ item.label }}</label>
										</a>
									</td>
								</tr>
								<!-- <tr>
									<th>建筑年代：</th>
									<td>
										<a href="javascript:;">
											<Input v-model="houseSell.totalPrice" style="width:300px" placeholder="请输入总价">
											    <span slot="append">年</span>
											</Input>
										</a>
									</td>
								</tr>
								<tr>
									<th>电话号码：</th>
									<td>
										<a href="javascript:;">
											<Input v-model="houseSell.totalPrice" style="width:300px" placeholder="请输入总价">
											</Input>
										</a>
									</td>
								</tr>
								<tr>
									<th>微信号：</th>
									<td>
										<a href="javascript:;">
											<Input v-model="houseSell.totalPrice" style="width:300px" placeholder="请输入总价">
											</Input>
										</a>
									</td>
								</tr> -->
							</tbody>
						</table>		

						<div class="paixu">
							<strong>排序：</strong>
							<a href="javascript:;" @click="sortChange('default')" :class="{'pai-cur': searchCon.sort === 'default'}" >默认</a>
							<a href="javascript:;" @click="sortChange('total_price')" :class="{'pai-cur': searchCon.sort === 'total_price'}">
								<span>价格</span> 
								<span v-if="house.dec && house.sort === 'total_price'">∨</span>
								<span v-if="!house.dec && house.sort === 'total_price'">∧</span>
							</a>
							<a href="javascript:;" @click="sortChange('ct')" :class="{'pai-cur': house.sort === 'ct'}">
								<span>最新</span>
								<span v-if="house.dec && house.sort === 'ct'">∨</span>
								<span v-if="!house.dec && house.sort === 'ct'">∧</span>
							</a>
						</div>
					</form>
					<!--pro-search/-->
				</div>
				<!--width1190/-->
				<div class="width1190">
					<div class="index-fang-list">
						<div v-for="(item, index) in houseSellArray" @click="detailHouseSell(item.sellId)">
							<dl class="index-item" :style="getLightStyleObject()">
								<dt><img :src="item.imgUrl"/></dt>
								<dd>
									<h3>{{item.xiaoqu}} </h3>
									<div class="hui">
										<span>{{item.roomCount}}室</span>
										<span>{{item.area}}m²</span>
										<span class="amount">￥{{item.totalPrice}}</span>
									</div>
								</dd>
							</dl>
			
						</div> 
						<div v-for="(item, index) in houseSellArray" @click="detailHouseSell(item.sellId)">
							<House  v-bind:house="item"></House>
						</div>
					</div>
					<div class="clears"></div>
					<div class="page">
						<Page class="pages"
			              :page-size="house.pageSize"
			              @on-change="pageSearch"
			              :total="house.total"
			              :current="house.currentPage"
			               />
					</div>
					
					
				</div>
				<!--width1190/-->
			</div>
	</div>
</template>

<script>
	import House from "../../components/house.vue";
	export default {
		components: {
			House,
		},
		data: function() {
			return {
        clientId:'',
				url:'',
        iport : '',
        modal11 : false,
        number :10,
        orderInfo : {},
				currentUser:{},
				searchCon: {
					total:null,
					provienceId: '0',
					cityId: '0',
					reignId: '0',
					sort: 'default',
					houseSellPrice: "",
					houseSellPriceFrom: "",
					houseSellPriceTo: "",
					dec: true,
					houseAreaId:"",
					louceng:null,
					chaoxiang:null,
					zhuangxiu:null,
					dianti:null,
					priceId:null,
					areaId:null,
					currentPage: 1,
					pianqu:null,
					xiaoqu:null,
					houseArea:null,
					roomCount:null,
					propertyType:null,
					pageSize: null,
				},
				houseSellArray: [
					//1,2,3,4,5,6,7,8,9,1,1,1
				],
				
				proviences : [],
					citys : [],
					regins : [],
					
					roomCount:'',
					floor:'',
					face:'',
					repair:'',
					lift:'',
					house: {
						sort: 'default',
						dec : true,
						provienceId: '0',
						cityId: '0',
						reignId: '0',
						des: "",
						houseAreaId:'0',
						louceng:null,
						chaoxiang:null,
						zhuangxiu:null,
						dianti:0,
						sellPriceId:'0',
						pianqu:null,
						xiaoqu:null,
						houseArea:null,
						roomCount:null,
						typeName:null,
						pageSize: null,
						currentPage:null,
						total:null,

					},
					houseSell: {
						unitPrice: "",
						totalPrice: "",
						propertYear: "",

						ct: "",
						ut: ""
					},
					propertTypes: [
						{
							value: null,
							label: '不限'
						},
						{
							value: 1,
							label: '国产'
						},
						{
							value: 2,
							label: '公寓'
						},
						{
							value: 3,
							label: '使用权'
						},
						{
							value: 4,
							label: '军产'
						},
						
						{
							value: 5,
							label: '地产'
						},
						
						{
							value: 6,
							label: '公建'
						},
						{
							value: 7,
							label: '门头'
						},
						{
							value: 8,
							label: '商铺'
						},
						
					],
					roomCounts:[
						{value:null,label:'不限'},
						{value:1,label:'一室'},
						{value:2,label:'二室'},
						{value:3,label:'三室'},
						{value:4,label:'四室'},
						{value:5,label:'五室以上'},
						{value:6,label:'上跃'},
						{value:7,label:'下跃'},
						{value:8,label:'别墅'}
					],
					floors:[
						{value:null,label:'不限'},
						{value:'高',label:'高'},
						{value:'中',label:'中'},
						{value:'低',label:'低'},
						{value:'多层',label:'多层'},
						{value:'小高层',label:'小高层'},
						{value:'高层',label:'高层'},
					],
					faces:[
						{value:null,label:'不限'},
						{value:'南北',label:'南北'},
						{value:'东西',label:'东西'},
						{value:'其他',label:'其他'}
					],
					repairs:[
						{value:null,label:'不限'},
						{value:'清水',label:'清水'},
						{value:'简装',label:'简装'},
						{value:'精装',label:'精装'},
						{value:'豪装',label:'豪装'}
					],
					lifts:[
						{value:0,label:'不限'},
						{value:1,label:'有'},
						{value:2,label:'无'}
					],
					prices:[],
					areas:[],
				
			};
		},
		methods: {
      getOrderStatu: function () {
        console.log(this.$data.number);
        this.number--;
        if(this.number === 0){
          clearInterval(this.longSearch)
          this.modal11 = false
          this.number = 10
          this.$Notice.error({
            title: '支付超时',
          });
        }
        //发请求查询支付状态
        this.http.get({
          url: "/pay-order/info",
          param: {

            orderNumber:this.orderInfo.orderNumber
          }
        }).then(data => {

          console.log("支付状态" + data);

          if(data == 2) {
            this.modal11 = false
            clearInterval(this.longSearch)
            //this.longSearch()

            this.$Notice.success({
              title: '支付成功',
            });
          }
        })
      },
      detailHouseSell: function(sellId){
        this.clientId = JSON.parse(sessionStorage.getItem('CURRENT')).client.clientId;
        console.log(this.house.clientId);
        this.http.get({
          url: "/quotarecord/info",
          param: {
            clientId: this.clientId,
            orderTypeId : 9
          }
        }).then(data => {
          if(data.quota +1 > 0){
            this.$router.push({
              name:'house_sale_detail',
              params:{
                sellId
              }
            })
          } else{
            let paramm = {};
            this.http.post({
              url:'/pay-order/info',
              param:{
                clientId:this.clientId,
                orderTypeId:9
              }
            }).then((data) => {
              this.$data.orderInfo = data
              paramm.clientId = this.$data.orderInfo.clientId;
              paramm.orderNumber = this.$data.orderInfo.orderNumber;
              paramm.price = this.$data.orderInfo.price;
              paramm.orderTypeId = this.$data.orderInfo.orderTypeId;
              this.modal11 = true;
              this.url =  this.iport + 'pay/nativeV2?clientId='+paramm.clientId
                  +'&orderTypeId='+paramm.orderTypeId
                  +'&money='+paramm.price
                  +'&orderNumber='+paramm.orderNumber
              this.longSearch = setInterval(this.getOrderStatu,3000)
            })
          }
          console.log(data);
        });
			},
			getLightStyleObject: function() {
				return {
					animation: 'light'+this.common.getRandom(1, 4)+" "+this.common.getRandom(1, 10)+'s infinite',
				}
			},
			// searchPro:function(provienceId){
			// 	this.house.proId = provienceId
			// 	this.http.get({
			// 			url : "/house-sell-client-vo/page",
			// 			param:{
			// 				louceng:this.louceng,
			// 				zhuangxiu:this.zhuangxiu,
			// 				chaoxiang : this.chaoxiang,
			// 				dianti:this.dianti,
			// 				sellPriceId : this.priceId,
			// 				houseAreaId : this.areaId, 
			// 				pianqu:this.house.pianqu,
			// 				xiaoqu:this.house.xiaoqu,
			// 				provienceId : this.house.proId,
			// 				cityId : this.house.cityId,
			// 				reignId : this.house.reignId,
			// 				typeName : this.propertyType,
			// 				roomCount : this.roomCount
			// 			}
			// 		}).then(data => {
			// 			console.log("卖房信息为 : ");
			// 			console.log(data);
			// 			this.$data.houseSellArray = data.records
			// 		})
			// },
			
			searchPianqu:function(){
				this.searchData(1)
			},
			searchXiaoqu:function(){
				this.searchData(1)
			},
			//楼层======================================  louceng
			searchLouceng:function(louceng){
								
				if(louceng == 0){
					louceng = null;
					this.house.louceng = louceng;
				}else{
					this.house.louceng = louceng;
				}
				
				if(this.house.pianqu == ""){
					this.house.pianqu = null;
				}
				
				if(this.house.xiaoqu == ""){
					this.house.xiaoqu = null;
				}
				
				this.searchData(1)
				
			},
			//装修====================================== zhuangxiu	
			searchZhuangxiu:function(zhuangxiu){
				if(zhuangxiu == "不限"){
					zhuangxiu = null;
					this.house.zhuangxiu = zhuangxiu;
				}else{
					this.house.zhuangxiu = zhuangxiu;
				}
				
				
				if(this.house.pianqu == ""){
					this.house.pianqu = null;
				}
				
				if(this.house.xiaoqu == ""){
					this.house.xiaoqu = null;
				}
				
				this.searchData(1)
				
			},
			//朝向====================================== chaoxiang
			searchChaoxiang:function(chaoxiang){
				
				if(chaoxiang == "不限"){
					chaoxiang = null
					this.house.chaoxiang = chaoxiang;
				}else{
					this.house.chaoxiang = chaoxiang;
				}
				
				
				if(this.house.pianqu == ""){
					this.house.pianqu = null;
				}
				
				if(this.house.xiaoqu == ""){
					this.house.xiaoqu = null;
				}
				
				this.searchData(1)
			},
			//电梯======================================  dianti   
			searchDianti:function(dianti){
				console.log(dianti);
				if(dianti == 0){
					this.house.dianti = null;
				}else{
					this.house.dianti = dianti;
				}
				
				
				if(this.house.pianqu == ""){
					this.house.pianqu = null;
				}
				
				if(this.house.xiaoqu == ""){
					this.house.xiaoqu = null;
				}
				
				this.searchData(1)
			},
			//价格========================================= sellPriceId
			searchPricePage:function(priceId){
					
					this.house.sellPriceId = priceId;
					
					
					if(this.house.pianqu == ""){
						this.house.pianqu = null;
					}
					
					if(this.house.xiaoqu == ""){
						this.house.xiaoqu = null;
					}
					
				this.searchData(1)	
			},
			//面积========================================= houseAreaId
			searchAreaPage:function(areaId){
				console.log(areaId);
				this.house.houseAreaId = areaId;
				
				if(this.house.pianqu == ""){
					this.house.pianqu = null;
				}
				
				if(this.house.xiaoqu == ""){
					this.house.xiaoqu = null;
				}
	
				
				this.searchData(1)	
			},
			//产权=========================================== typeName
			searchProperty:function(propertType){
				console.log(propertType);
				if(propertType == "不限"){
					this.house.typeName = null;
				}else{
					this.house.typeName = propertType;
				}
				
				
				if(this.house.pianqu == ""){
						this.house.pianqu = null;
					}
					
					if(this.house.xiaoqu == ""){
						this.house.xiaoqu = null;
					}
					
				this.searchData(1)	
				
				
				
				
			},
			//户型=========================================== roomCount  pianqu xiaoqu privienceId cityId  reignId
			searchRoomType:function(roomCount){
						console.log(roomCount);
						if(roomCount == 0){
							this.house.roomCount = null;
						}else{
							this.house.roomCount =roomCount;
						}
						
						
						if(this.house.pianqu == ""){
								this.house.pianqu = null;
							}
							
							if(this.house.xiaoqu == ""){
								this.house.xiaoqu = null;
							}
							
						this.searchData(1)	
			},
			searchArea:function(){
				this.http.get({
						url : "/house-area/list",
					}).then(data => {
						console.log(data)
						this.$data.areas = data
						let unCondition = {
							houseAreaId : 0,
							areaInterval : '不限'
						}
						this.$data.areas.unshift(unCondition)
						// self.$data.regins = data;
					})
				},
			searchPrice:function(){
				this.http.get({
						url : "/house-sell-price/list",
					}).then(data => {
						console.log(data)
						this.$data.prices = data
						let unCondition = {
							sellPriceId : 0,
							priceInterval : '不限'
						}
						this.$data.prices.unshift(unCondition)
						// self.$data.regins = data;
					})
				},
			searchRegin : function(srId){
				this.house.cityId = srId
				this.house.reignId = "0";
				if(!srId){
					this.regins = [];
					this.house.cityId = "0";
					this.house.reignId = "0";
				}
				else{
					let self = this
					this.http.get({
						url : "/sys-region/list",
						param : {
							parentId : srId
						}
					}).then(data => {
						self.$data.regins = data;
					})
				}
				this.searchData(1);	
			},
			searchRegin2 : function(){
				this.searchData(1)
			},
			searchCity : function(srId){
				this.house.provienceId = srId
				this.regins = [];
				this.house.cityId = "0";
				this.house.reignId = "0";
				if(!srId){
					this.citys = [];
					this.house.provienceId = "0";
					this.house.cityId = "0";
					this.house.reignId = "0";
				}
				else {
					let self = this
					this.http.get({
						url : "/sys-region/list",
						param : {
							parentId : srId
						}
					}).then(data => {
						self.$data.citys = data
					});
				}
				this.searchData(1);
				
			},
			searchProvience : function(){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId : 0
					}
				}).then(data => {
					self.$data.proviences = data;
				});
			},
			sortChange: function(sortKey) {
				if (this.house.sort !== sortKey) {
					this.house.dec = false;
				}
				this.house.sort = sortKey;
				this.house.dec = !this.house.dec;
				this.searchData(1);
			},
			searchPChange: function(srId) {
				this.house.provienceId = srId;
				this.searchData(1);
			},
			searchCChange: function(srId) {
				this.house.cityId = srId;
				this.searchData(1);
			},
			searchRChange: function(srId) {
				this.house.reignId = srId;
				this.searchData(1);
			},
			pageSearch: function(page) {
				this.house.currentPage = page;
				this.searchData(page);
			},
			searchData: function(current) {
				let self = this
				self.$data.house.currentPage = current
				this.http.get({
					url: "/house-sell-client-vo/page",
					param: this.house
				}).then(data => {
					console.log(data)
					this.$data.house.pageSize = data.size,
					this.$data.house.currentPage = data.current,
					this.$data.house.total = data.total
					this.houseSellArray = data.records;
				});
			},
			houseSellPriceClick: function() {
				if (this.common.isStringNotNumber(this.house.houseSellPriceFrom)) {
					this.message.info("请输入正确的开始价格！");
					return;
				}
				
				if (this.common.isStringNotNumber(this.house.houseSellPriceTo)) {
					this.message.info("请输入正确的结束价格！");
					return;
				}
				
				if (parseInt(this.house.houseSellPriceFrom) > parseInt(this.house.houseSellPriceTo)) {
					this.message.info("开始价格必须大于结束价格！");
					return;
				}
				
				
				
		 	},
			},
		
		created: function() {
			this.$data.currentUser = JSON.parse(sessionStorage.getItem('CURRENT'))
			this.$data.clientId = this.$data.currentUser.client.clientId
			this.iport = this.store.state.iport
			this.searchProvience()
			this.searchArea()
			this.searchPrice()
			this.searchData(1)
			// this.houseSell();
			
		},
		beforeRouteLeave(to, from, next) {
		    this.$destroy();//手动销毁当前页面
		    next();
		},
	
	}
</script>

<style>
</style>
